<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>登录</title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <style>
        /*标题样式*/
        .mui-title {
            color: #f9f9f9;
        }

        .mui-bar {
            background-color: #494A5F;
        }

        .mui-bar-nav {
            top: 0;
            -webkit-box-shadow: 0 1px 6px #d5d7dc;
            box-shadow: 0 1px 6px #d5d7dc;
        }

        /*回退按钮样式*/
        a {
            color: #ffffff;
        }

        /*整体背景样式*/
        body {
            background-color: white;
        }

        /*表格前线条样式*/
        .mui-table-view:before {
            height: 0px;
        }

        /*表格后线条样式*/
        .mui-table-view:after {
            height: 0px;
        }

        /*表格距离顶样式*/
        .mui-content > .mui-table-view:first-child {
            margin-top: 6.667%;
        }

        /*输入框前线条样式*/
        .mui-input-group:before {
            background-color: white;
            height: 0px;
            width: 314px;
            padding: 32px;;
        }

        /*输入框后线条样式*/
        .mui-input-group:after {
            height: 0px;
        }

        /*输入框DIV样式*/
        .mui-input-row {
            margin: 2.82% 8.533%;
        }

        /*输入框样式*/
        .mui-input-row input {
            margin-left: 3.28%;
            font-size: 14px;
            color: #999999;
        }

        .mui-content {
            background-color: white;
        }

        .mui-input-group .mui-input-row:after {
            left: 0px;
        }

        /*注册条约部分样式*/
        .mui-input-row label {
            font-family: 'Helvetica Neue', Helvetica, sans-serif;
            line-height: 1.1;
            float: left;
            width: 100%;
            padding: 20px 0px 11px 11px;
            font-size: 12px;
            color: #333333;
        }

        /*注册按钮样式*/
        .mui-button-row {
            margin-top: 8.03%;
        / / 28.5 px;
            padding: 0px 0px;
        }

        .mui-btn {
            width: 314px;
            height: 44px;
        }

        /*点击注册按钮样式*/
        .mui-btn-primary, input[type=submit], .mui-btn-primary:enabled:active, input[type=submit]:enabled:active {
            color: #ffffff;
            border: 1px solid #494A5F;
            border-radius: 3px;
            background-color: #494A5F;
            font-size: 17px;
        }

        /*验证码按钮样式*/
        .mui-input-row .mui-btn {
            font-family: 'Helvetica Neue', Helvetica, sans-serif;
            line-height: 1.1;
            float: right;
            width: 23%;
            padding: 0px 0px;
            height: 59%;
            margin-top: -6.2%;
            margin-right: 1%;
        }

        .mui-btn-block {
            font-size: 10px;
            color: #666666;
            display: block;
            margin-bottom: 10px;
            border-color: #8d258e;
        }

    </style>

</head>
<body>
<header class="mui-bar mui-bar-nav">
    <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
    <h1 class="mui-title">登录</h1>
</header>
<div class="mui-content">
    <div class="mui-table-view">
        <form class="mui-input-group">
            <div class="mui-input-row">
                <input type="text" id="mobile" placeholder="请输入手机号"/>
                <span style="display: block; width: 40%; height: 40%;  vertical-align: top; background: url(images/icon-phone@3x.png) no-repeat 0 0;background-size: contain; margin-top: -9.2%; margin-left: 1%;"></span>
                <button type="button" id="sendCode" class="mui-btn  mui-btn-block"
                        style="float: right;font-size: 10px; color: #999999;border-color: #494A5F;">获取验证码
                </button>
            </div>

            <div class="mui-input-row">
                <input type="text" id="code" placeholder="请输入验证码"/>
                <span style="display: block; width: 40%; height: 40%; vertical-align: top; background: url(images/icon-identity@3x.png) no-repeat 0 0;background-size: contain; margin-top: -9.2%; margin-left: 1%;"></span>
            </div>
        </form>
    </div>
    <div class="mui-button-row">
        <button type="button" class="mui-btn mui-btn-primary" id="loginBtn">登录</button>
    </div>
</div>

</body>
</html>
<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">

    var verifycode="";
    mui.init();

    function wait(t, obj) {
        v = obj.value;
        var original = document.getElementById('sendCode').innerText;
        setInterval(function () {
            if (t > 0) {
                obj.innerText = --t + '秒后重试';
                obj.disabled = true;
            } else {
                window.clearInterval(0);
                obj.innerText = original;
                obj.disabled = false;
            }
        }, 1000);
    }

    mui.ready(function () {

        //发送验证码
        document.getElementById('sendCode').addEventListener('click', function () {
            var mobile = document.getElementById('mobile').value;

            if (!mobile) {
                mui.alert('请先输入手机号!');
                return;
            }

            //验证码30分钟有效
            app.loadData('/login/code', {"mobile": mobile},
                    function (data) {
                        if (data.msg_code === '0000') {
                            wait(60, document.getElementById('sendCode'));
                            verifycode = data.code;
                        } else {
                            mui.alert(data.msg_desc);
                        }
                    },
                    function (xhr, type, error) {
                        mui.alert('网络异常！');
                    }
            );
        });


        //登陆提交
        document.getElementById('loginBtn').addEventListener('click', function (e) {
            //获取注册数据
            var mobile = document.getElementById('mobile').value;
            var code = document.getElementById('code').value;

            if (!mobile) {
                mui.alert('手机号不能为空!');
                return;
            }
            if (!code) {
                mui.alert('验证码不能为空!');
                return;
            }
            if (code!=verifycode) {
                mui.alert('验证码不正确!');
                return;
            }

            var params = JSON.stringify({mobile: mobile, code: code});
            app.loadData('/login/submit', {
                        mobile: mobile,
                        code: code
                    },
                    function (data) {
                        if (data.msg_code === '0000') {
                            //将用户信息和token存入sessionStorage中
                            sessionStorage.userid = data.userid;
                            sessionStorage.mobile = data.mobile;
                            mui.openWindow({
                                url: '/my/my_coupon.html',
                                id: 'my'
                            });
                        } else {
                            mui.alert(data.msg_desc);
                        }
                    },
                    function (xhr, type, error) {
                        mui.alert('网络异常！');
                    }
            );
        });
    });
</script>